<template>
  <div class="py-6">
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900">客户工作台</h1>
      <p class="mt-1 text-sm text-gray-500">欢迎使用YT工单派单管理系统</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
              <i class="fa fa-file-text-o text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">总工单数</h3>
              <p class="text-2xl font-semibold text-gray-900">24</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
              <i class="fa fa-check-circle-o text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">已完成</h3>
              <p class="text-2xl font-semibold text-gray-900">18</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">
              <i class="fa fa-clock-o text-yellow-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">处理中</h3>
              <p class="text-2xl font-semibold text-gray-900">4</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-red-100 rounded-md p-3">
              <i class="fa fa-exclamation-circle text-red-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">待处理</h3>
              <p class="text-2xl font-semibold text-gray-900">2</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷操作 -->
    <div class="bg-white shadow rounded-lg mb-6">
      <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">快捷操作</h2>
      </div>
      <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <router-link to="/client/tickets/create" class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary">
            <div class="flex-shrink-0">
              <i class="fa fa-plus-circle text-2xl text-primary"></i>
            </div>
            <div class="min-w-0 flex-1">
              <span class="absolute inset-0" aria-hidden="true"></span>
              <p class="text-sm font-medium text-gray-900">创建工单</p>
              <p class="text-sm text-gray-500 truncate">提交新的服务请求</p>
            </div>
          </router-link>

          <router-link to="/client/tickets" class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary">
            <div class="flex-shrink-0">
              <i class="fa fa-list text-2xl text-primary"></i>
            </div>
            <div class="min-w-0 flex-1">
              <span class="absolute inset-0" aria-hidden="true"></span>
              <p class="text-sm font-medium text-gray-900">我的工单</p>
              <p class="text-sm text-gray-500 truncate">查看和管理工单</p>
            </div>
          </router-link>

          <router-link to="/client/profile" class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary">
            <div class="flex-shrink-0">
              <i class="fa fa-user text-2xl text-primary"></i>
            </div>
            <div class="min-w-0 flex-1">
              <span class="absolute inset-0" aria-hidden="true"></span>
              <p class="text-sm font-medium text-gray-900">个人资料</p>
              <p class="text-sm text-gray-500 truncate">管理账户信息</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 最近工单 -->
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">最近工单</h2>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">您最近提交的工单记录</p>
      </div>
      <div class="border-t border-gray-200">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工单号</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提交时间</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TKT-20230801-001</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">网络连接问题</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-01 10:30</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TKT-20230805-002</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">软件安装请求</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-05 14:15</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">处理中</span>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TKT-20230810-003</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">硬件故障报告</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-10 09:45</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">待处理</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
          <router-link to="/client/tickets" class="text-sm font-medium text-primary hover:text-primary-dark">
            查看所有工单 <i class="fa fa-arrow-right ml-1"></i>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>